<template>
	<div class="evidence-unit-container">
		<el-dialog title="编辑菜单" v-model="isShowDialog" width="769px" :center="true">
			<el-form :model="ruleForm" size="small" label-width="80px">
				<el-row :gutter="35">
					<el-col :span="24" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="上级菜单">
							<el-input :disabled="true" v-model="ruleForm.parentTitle"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单名称">
							<el-input v-model="ruleForm.title" placeholder="格式：message.router.xxx" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="路由名称">
							<el-input v-model="ruleForm.name" placeholder="路由名称（路由中的name值）" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="路由地址">
							<el-input v-model="ruleForm.url" placeholder="路由名称（路由中的url值）" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单图标">
							<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.icon" />
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="组件地址">
							<el-input v-model="ruleForm.component" placeholder="组件地址" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否隐藏">
							<el-select v-model="ruleForm.isHide" placeholder="请选择是否隐藏" clearable class="w100">
								<el-option label="是" :value=true></el-option>
								<el-option label="否" :value=false></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否缓存">
							<el-select v-model="ruleForm.isKeepAlive" placeholder="请选择是否缓存" clearable class="w100">
								<el-option label="是" :value=true></el-option>
								<el-option label="否" :value=false></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否固定">
							<el-select v-model="ruleForm.isAffix" placeholder="请选择是否固定" clearable class="w100">
								<el-option label="是" :value=true></el-option>
								<el-option label="否" :value=false></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="是否外链">
							<el-select v-model="ruleForm.isLink" placeholder="请选择是否外链" clearable class="w100" @change="ruleForm.linkPath=ruleForm.isLink=='1'?ruleForm.linkPath:''">
								<el-option label="是" value='1'></el-option>
								<el-option label="否" value=''></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="链接地址">
							<el-input
								v-model="ruleForm.linkPath"
								placeholder="外链/内嵌时链接地址（http:xxx.com）"
								clearable
								:disabled="!ruleForm.isLink"
							>
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="权限标识">
							<el-input v-model="ruleForm.auth" placeholder="路由权限标识（多个请用逗号隔开）" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="菜单排序">
							<el-input-number v-model="ruleForm.sort" :min="1" :max="10" placeholder="菜单排序"></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import IconSelector from '/@/components/iconSelector/index.vue';
import { useI18n } from 'vue-i18n';
import {postMenu} from '/@/api/menu/index'
import { ElMessage, ElMessageBox } from 'element-plus';
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
export default {
	name: 'systemEditMenu',
	components: { IconSelector },
	setup() {
		const state = reactive({
			isShowDialog: false,
			/**
			 * 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式（请注意参数类型！）
			 * 受到 `element plus` 类型 `string/number/object` 影响，不可使用 `:value="true"`
			 * 的写法，所以传值到后台时，需要转换成布尔值，否则页面可能出现玄学。
			 * 路由权限标识为数组格式，基本都需要自行转换类型
			 */
			ruleForm: {
				ParentId:0,
				id:'0',
				url:'', //路由地址
				name: '', // 路由名称
				component: '', // 组件地址
				sort: 0, // 菜单排序
				title: '', // 菜单名称
				icon: '', // 菜单图标
				isHide: false, // 是否隐藏
				isKeepAlive: false, // 是否缓存
				isAffix: false, // 是否固定
				isLink: '', // 是否外链，开启外链条件，`1、isLink:true 2、链接地址不为空`
				linkPath: '', // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
				auth: '["admin"]', // 路由权限标识（多个请用逗号隔开），最后转成数组格式,
				parentTitle:'',
				Level:0
			},
		});
		// 打开弹窗
		const openDialog = (row: any) => {
			state.ruleForm.parentTitle=row.meta.title;
			state.ruleForm.ParentId=row.id;
			state.ruleForm.Level=row.id>0?1:0;
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
			initForm();
		};
		// 编辑
		const onSubmit = async () => {
			await postMenu(state.ruleForm).then((res:any)=>{
				if(res.success){
					ElMessage.success('添加成功')
					closeDialog();
					setBackEndControlRefreshRoutes();
				}else{
					ElMessage.error('添加失败')
				}
			})
		};
		// 表单初始化，方法：`resetFields()` 无法使用
		const initForm = () => {
			state.ruleForm.name = '';
			state.ruleForm.component = '';
			state.ruleForm.isLink = '';
			state.ruleForm.sort = 0;
			state.ruleForm.title = '';
			state.ruleForm.icon = '';
			state.ruleForm.isHide = false;
			state.ruleForm.isKeepAlive = false;
			state.ruleForm.isAffix = false;
			state.ruleForm.linkPath = '';
			state.ruleForm.auth = '';
			state.ruleForm.url = '';
		};
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>
